<template>
	<view class="menu">
		<block v-for="(item,i) in menus" :key="i">
			<view class="menu-item" @click="onTap(item)">
				<image :src="item.src" mode="widthFix" />
				<view class="tip">
					<view>{{item.title}}</view>
					<view>{{item.num}}</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			menus: {
				type: Array,
				default: []
			}
		},
		methods: {
			onTap(item) {
				this.$emit('cardClick', item)
			}
		}
	}
</script>

<style lang="less" scoped>
	.menu{
	  text-align:center;
	  padding: 40rpx 0;
	  .menu-item{
	    position: relative;
	    image{
	      margin: 12rpx 0;
	    }
	    .tip{
	      position: absolute;
	      left: 45%;
	      top: 19%;
	      color: #fff;      
	      view{
	        margin: 10rpx 0;
	      }
	    }
	  }
	}
</style>
